import React from "react";
import {WeaLocaleProvider, WeaQrcode, WeaSelect} from "ecCom";
import PublishingDialog from "./dialog/publish";
import {inject, observer} from "mobx-react";
import CopyToClipboard from 'react-copy-to-clipboard';
import {Button, Icon, message, Popover, Tooltip} from "antd";
import RuleDialog from "./dialog/rule";

const getLabel = WeaLocaleProvider.getLabel;

@inject('routing', 'edcFormDesignerStore')
@observer
export default class FormDesignerHeader extends React.Component {
  constructor(props) {
    super();

    this.store = props.edcFormDesignerStore;
  }

  preview = () => {
    this.props.routing.push({
      pathname: `/edc/form/preview/${this.store.appid}`,
    });
  }

  render() {
    const {
      hasSaved, shortkey, isPublishingVisible, isRuleVisible, readonly, appid,
      showPublishingDialog, hidePublishingDialog, hideRuleDialog, toggleScriptVisible,
      isScriptVisible
    } = this.store;
    const url = `${location.protocol}//${location.host}/edc/formview/${shortkey}`;
    const showPublish = hasSaved && shortkey;
    const { saving, saveForm } = this.store;
    const btnIcon = saving ? 'loading' : 'save';

    return (
      <header className='ef-header wea-f14'>
        <div className='clearfix'>
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@49wxkb`} type='primary' disabled={readonly} icon={btnIcon} type='ghost' onClick={saveForm}>{getLabel(30986,'保存')}</Button>
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@h0ehnp`} type='primary' icon='eye-o' type='ghost' onClick={this.preview}>{getLabel(221,'预览')}</Button>
          {!showPublish ? null :
            <span className='wea-f12 ef-publish'>
              <span className='clearfix'>{getLabel('502639','发布表单')} <span className='ef-publish-url f-ellipsis'>{url}</span></span>
              <span className='ef-publish-actions'>
                <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@jf64je`} placement='bottom' title={getLabel(502548,'复制网址')}>
                  <CopyToClipboard ecId={`${this && this.props && this.props.ecId || ''}_CopyToClipboard@yecbp4`} text={url}
                    onCopy={() => message.success(getLabel('502640','复制URL成功'))}
                  >
                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@3wt0os`} type='copy' />
                  </CopyToClipboard>
                </Tooltip>
                <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@amgrxi`} trigger={['hover']} placement='bottom' content={<WeaQrcode ecId={`${this && this.props && this.props.ecId || ''}_WeaQrcode@u3r7zz`} text={url} size={148} />}>
                  <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@ckj59e`} type='qrcode' />
                </Popover>
                <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@cdcv5p`} placement='bottom' title={getLabel(127521, '源码')}>
                  <i className="icon-edc-common-code"  style={{ 'font-size': 18, color: isScriptVisible ? '#2baee9' : '#666' }} onClick={toggleScriptVisible}></i>
                </Tooltip>
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1qzy9v`} type='ghost' disabled={readonly} icon='edc-publish' onClick={showPublishingDialog}>{getLabel(502605,'发布')}</Button>
              </span>
              <PublishingDialog ecId={`${this && this.props && this.props.ecId || ''}_PublishingDialog@wj894v`}
                appid={appid}
                visible={isPublishingVisible}
                onOk={hidePublishingDialog}
                onCancel={hidePublishingDialog}
              />
              <RuleDialog ecId={`${this && this.props && this.props.ecId || ''}_RuleDialog@xlch62`} 
                appid={appid}
                visible={isRuleVisible}
                onCancel={hideRuleDialog}
              />
            </span>
          }
        </div>
      </header>
    );
  }
}